<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>博客</title>
  <script src="./js/index.js"></script>
  <style>
		.box img{
			display: block;
			width: 200px;
			height: 200px;
		}
	</style>
</head>
<body>
  <h1>赖海涛的主页</h1>
  <input type="file" id="file" />
	<div class="box"></div>
	<script>
        /*
            
停车场计费需求：8:00-17:00：30分钟内免费，超出30分钟，5元/小时，不满1小时按1小时计算，至17:00前30元封顶；
17:00-22:00：30分钟内免费，超出30分钟，10元/小时，不满1小时按1小时计算；
22:00-0:00：0:00前离开，40元/次；
0:00-次日8:00：50元/次。过次日8点后，按时段规则累计计算；
全程只首个时间段计算免费时长（30分钟），车辆停放超过24小时，按以上规则循环累计计费；

举例：车辆1月1号10：00进场，1月2号23：00出场
第一天（8：00-17：00）：10：00处于8点到17点的时段，该时段停车时长17-10=7小时（7*60=420分钟），
超过30分钟，该段计费时长=该时段总停车时长420-免费时长30=390分钟，将计费时长换算成小时=390/60=6.5小时，
向上取整，则该段计费时长是7小时，每小时5元，该时段计费=7*5=35元，但该时段封顶30员，所以收费30元；
第一天（17:00-22:00）：第一个时段已计算了免费时长30分钟，后面所有的其他时段不再计算。
该时段停车时长=22-17=5小时（5*60=300分钟），每小时10元，该时段计费=5*10=50元；

第一天（22:00-0:00）:该时段停车计费40元；
第二天（0:00-次日8:00）：该时段停车计费50元；
第二天（8：00-17：00）：该时段停车时长=17-8=9小时（9*60=540分钟），每小时5元，该时段计费9*5=45元，
但该时段封顶30元，所以收费30元；
第二天（17:00-22:00）：该时段停车时长=22-17=5小时（5*60=300分钟），每小时10元，该时段计费=5*10=50元；
第二天（22:00-0:00）:车辆23:00出场，该时段停车计费40元；
总停车费=30+50+40+50+30+50+40=290元。
使用js实现计费规则，入参为进场时间和出场时间的时间戳，返回停车费

        */
		const oFile = document.querySelector('#file')
		const oBox = document.querySelector('.box')
		oFile.addEventListener('change', function(e) {
			const file = e.target.files[0]
			console.log(file)

			 // 生成一个文件读取的对象
		    const reader = new FileReader();
		    reader.onload = function (ev) {
		        // base64码
		        var imgFile =ev.target.result;//或e.target都是一样的
		        oBox.innerHTML= `<img src="${ev.target.result}" />`;
		    }
		    //发起异步读取文件请求，读取结果为data:url的字符串形式，
		    reader.readAsDataURL(file);

		})
	</script>
</body>
</html>